<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<style>
		img{
			width: 600px;
			height: 400px;
		}
		
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 模拟轮播图的功能。在图片左右两侧各有一个按钮，点击时，图片进行切换 -->
			<button @click="leftImg()" v-show="lbutton">&lt;</button>
			<!-- v-bind指令的简介，可以将v-bind全部省略，直接用：指定后面需要绑定的属性即可-->
			<img :src="imgSrc[index]" />
			<button @click="rightImg()" v-show="rbutton">&gt;</button>
		</div>
	</body>
	<script>
	var app=new Vue({
		el:"#app",
		data:{
			imgSrc:["img/bg1.jpg","img/bg2.jpg","img/bg3.jpg","img/bg4.jpg","img/bg5.jpg",
			"img/bg6.jpg","img/bg7.jpg","img/bg8.jpg","img/bg9.jpg","img/bg10.jpg"],
			index:0,
			lbutton:true,
			rbutton:true
		},
		methods:{
			leftImg:function(){
							this.index--
							this.rbutton=true
							if(this.index==0){
								this.lbutton=false
							}
						},
						rightImg:function(){
							this.index++
							this.lbutton=true
							if(this.index==this.imgSrc.length-1){
								this.rbutton=false
							}
							
						}
		}
	})
	
	</script>
</html>
